<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发者管理 - 任务管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link th:href="@{/css/main.css}" rel="stylesheet">
</head>
<body>
    <!-- 主导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-kanban"></i> 任务管理系统
            </a>
            <div class="navbar-nav me-auto">
                <a class="nav-link" href="/dashboard">🏠 工作台</a>
                <a class="nav-link" href="/projects">📋 项目管理</a>
                <a class="nav-link" href="/requirements">📝 需求管理</a>
                <a class="nav-link" href="/tasks">✅ 任务管理</a>
                <a class="nav-link active" href="/developers">👥 开发者管理</a>
            </div>
            <div class="navbar-nav">
                <div class="nav-item">
                    <input type="search" class="form-control" placeholder="全局搜索..." id="globalSearch">
                </div>
                <a class="nav-link" href="/settings">⚙️ 系统设置</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航 -->
            <nav class="col-md-2 d-md-block bg-light sidebar">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <i class="bi bi-house"></i> 工作台
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/projects">
                                <i class="bi bi-folder"></i> 项目管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/requirements">
                                <i class="bi bi-file-text"></i> 需求管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/tasks">
                                <i class="bi bi-check-square"></i> 任务管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/developers">
                                <i class="bi bi-people"></i> 开发者管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/settings">
                                <i class="bi bi-gear"></i> 系统设置
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <!-- 面包屑导航 -->
                <nav aria-label="breadcrumb" class="mt-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/dashboard">工作台</a></li>
                        <li class="breadcrumb-item active" aria-current="page">开发者管理</li>
                    </ol>
                </nav>

                <!-- 页面标题和操作区 -->
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">开发者管理</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group me-2">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDeveloperModal">
                                <i class="bi bi-plus"></i> 添加开发者
                            </button>
                        </div>
                        <div class="input-group">
                            <input type="search" class="form-control" placeholder="搜索开发者..." id="searchDeveloper">
                            <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 开发者列表 -->
                <div class="developer-list">
                    <div id="developerContainer">
                        <!-- 开发者卡片将通过JavaScript动态加载 -->
                    </div>
                    
                    <!-- 加载状态 -->
                    <div id="loadingSpinner" class="text-center py-4">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                    
                    <!-- 空状态 -->
                    <div id="emptyState" class="text-center py-5" style="display: none;">
                        <i class="bi bi-people display-1 text-muted"></i>
                        <h3 class="text-muted mt-3">暂无开发者</h3>
                        <p class="text-muted">点击上方"添加开发者"按钮开始添加团队成员</p>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 添加开发者模态框 -->
    <div class="modal fade" id="addDeveloperModal" tabindex="-1" aria-labelledby="addDeveloperModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addDeveloperModalLabel">添加开发者</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addDeveloperForm">
                        <div class="mb-3">
                            <label for="developerId" class="form-label">开发者ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="developerId" placeholder="请输入开发者唯一标识" required>
                            <div class="form-text">用于系统内部识别的唯一标识，建议使用工号或邮箱前缀</div>
                        </div>
                        <div class="mb-3">
                            <label for="developerName" class="form-label">姓名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="developerName" required>
                        </div>
                        <div class="mb-3">
                            <label for="developerRole" class="form-label">角色 <span class="text-danger">*</span></label>
                            <select class="form-select" id="developerRole" required>
                                <option value="">请选择角色</option>
                                <option value="JUNIOR_DEVELOPER">初级开发者</option>
                                <option value="DEVELOPER">开发者</option>
                                <option value="SENIOR_DEVELOPER">高级开发者</option>
                                <option value="TECH_LEAD">技术负责人</option>
                                <option value="ARCHITECT">架构师</option>
                                <option value="PROJECT_MANAGER">项目经理</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveDeveloperBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑开发者模态框 -->
    <div class="modal fade" id="editDeveloperModal" tabindex="-1" aria-labelledby="editDeveloperModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editDeveloperModalLabel">编辑开发者</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editDeveloperForm">
                        <input type="hidden" id="editDeveloperId">
                        <div class="mb-3">
                            <label for="editDeveloperName" class="form-label">姓名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editDeveloperName" required>
                        </div>
                        <div class="mb-3">
                            <label for="editDeveloperRole" class="form-label">角色 <span class="text-danger">*</span></label>
                            <select class="form-select" id="editDeveloperRole" required>
                                <option value="JUNIOR_DEVELOPER">初级开发者</option>
                                <option value="DEVELOPER">开发者</option>
                                <option value="SENIOR_DEVELOPER">高级开发者</option>
                                <option value="TECH_LEAD">技术负责人</option>
                                <option value="ARCHITECT">架构师</option>
                                <option value="PROJECT_MANAGER">项目经理</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editDeveloperStatus" class="form-label">状态</label>
                            <select class="form-select" id="editDeveloperStatus">
                                <option value="ACTIVE">活跃</option>
                                <option value="BUSY">忙碌</option>
                                <option value="ON_LEAVE">请假</option>
                                <option value="INACTIVE">非活跃</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="updateDeveloperBtn">更新</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-success text-white">
                <i class="bi bi-check-circle me-2"></i>
                <strong class="me-auto">成功</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="successMessage">
                操作成功！
            </div>
        </div>
        
        <div id="errorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-danger text-white">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <strong class="me-auto">错误</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="errorMessage">
                操作失败，请重试！
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/js/main.js}"></script>
    <script th:src="@{/js/developers.js}"></script>
</body>
</html>